<template>
    <div class="screen">
      <div id="carousel">
        <div class="return_div" @click="goback">
          <img src="../../../assets/image/arrowleft.svg" class="return_img">
        </div>
      <mt-swipe>
        <mt-swipe-item>
          <div class="img_div">
            <img class="img" src="../../../assets/image/cainiao1.jpg" />
          </div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div class="img_div">
            <img class="img" src="../../../assets/image/cainiao2.jpg"/>
          </div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div class="img_div">
            <img class="img" src="../../../assets/image/cainiao3.jpg"/>
          </div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div class="img_div">
            <img class="img" src="../../../assets/image/cainiao4.jpg" />
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
      <div>
        <mt-navbar v-model="selected">
          <mt-tab-item id="1"><span class="tab_title">公司概况</span></mt-tab-item>
          <mt-tab-item id="2"><span class="tab_title">热招职位(152)</span></mt-tab-item>
        </mt-navbar>

        <!-- tab-container -->
        <mt-tab-container v-model="selected" swipeable=swipeable>
          <mt-tab-container-item id="1">
           <div>
             <div class="company_introduction">公司介绍</div>
             <div class="company_content" v-show="show">菜鸟网络科技有限公司成立于2013年5月28日，由阿里巴巴集团、银泰集团联合复星集团、富春集团、申通集团、圆通集团、中通集团、韵达集团等共同组建。
               菜鸟的愿景是建设一个数据驱动、社会化协同的物流及供应链平台。它是基于互联网思考、基于互联网技术、基于对未来判断而建立的创新型互联网科技企业。它致力于提供物流企业、电商企业无法实现，但是未来社会化物流体系必定需要的服务.......
             </div>
             <div class="company_content" v-show="!show">菜鸟网络科技有限公司成立于2013年5月28日，由阿里巴巴集团、银泰集团联合复星集团、富春集团、申通集团、圆通集团、中通集团、韵达集团等共同组建。
               菜鸟的愿景是建设一个数据驱动、社会化协同的物流及供应链平台。它是基于互联网思考、基于互联网技术、基于对未来判断而建立的创新型互联网科技企业。它致力于提供物流企业、电商企业无法实现，但是未来社会化物流体系必定需要的服务，即在现有物流业态的基础上，建立一个开放、共享、社会化的物流基础设施平台，在未来中国任何一个地区可实现24小时内送货必达。
               为此，菜鸟网络计划分三期建设，首期投资人民币1000亿元，希望在5-8年的时间，努力打造遍布全国的开放式、社会化物流基础设施，建立一张能支撑日均300亿(年度约10万亿)网络零售额的“中国智能骨干网”，帮助所有的企业货达天下，同时支持1000万家新型企业发展，创造1000万就业岗位。由菜鸟网络搭建的“中国智能骨干网”，将通过自建、共建、合作、改造等多种模式，在全中国范围内形成一套开放共享的社会化仓储设施网络。同时，利用先进的互联网技术，建立开放、透明、共享的数据应用平台，为电子商务企业、物流公司、仓储企业、第三方物流服务商、供应链服务商等各类企业和消费者提供优质服务。
               “中国智能骨干网”不仅是电子商务的基础设施，更是中国未来商业的基础设施。中国智能骨干网将应用物联网、云计算、网络金融等新技术，为各类B2B、B2C和C2C企业提供开放的服务平台，并联合网上信用体系、网上支付体系共同打造中国未来商业的三大基础设施。物流一直被认为电子商务“三流”（信息流、资金流、物流）最难攻克的障碍。2014年，中国网络零售市场交易规模达28211亿元，同比增长49.7%，按此增长速度，在可预见的几年内网络零售交易额将触及10万亿节点，高速发展的电子商务所代表的中国新经济，急需构建规模更大、效率更高、网络更完善、服务更优质的社会化物流基础设施平台。
               秉承和发扬开放、透明的互联网文化，菜鸟网络将通过开放的平台，与合作伙伴建立共赢的体系，服务整个电商生态圈内的所有企业，支持物流行业向高附加值领域发展和升级，最终促使建立社会化资源高效协同机制，提升中国社会化物流服务品质。
             </div>
             <mt-button type="default" size="large" v-show="show" @click="shrikContent"><img src="../../../assets/image/arrowdown.svg" height="20" width="20" slot="icon"></mt-button>
             <mt-button type="default" size="large" v-show="!show" @click="shrikContent"><img src="../../../assets/image/arrowup.svg" height="20" width="20" slot="icon"></mt-button>
           </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
           <div style="height: 100%">
             <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
               <div class="list_1_div" @click="showDetail">
                 <div class="list_2_div"><span class="span_title">JAVA实习生</span><span class="span_price">2500元/月</span></div>
                 <div class="list_3_div"><span class="county">海珠</span><span class="time_slot">每周至少3天</span></div>
                 <div class="littleInterval"></div>
               </div>
               <div class="list_1_div" @click="showDetail">
                 <div class="list_2_div"><span class="span_title">大数据实习生</span><span class="span_price">3000元/月</span></div>
                 <div class="list_3_div"><span class="county">海珠</span><span class="time_slot">每周至少2天</span></div>
                 <div class="littleInterval"></div>
               </div>
               <div class="list_1_div" @click="showDetail">
                 <div class="list_2_div"><span class="span_title">产品宣传员兼职</span><span class="span_price">80元/天</span></div>
                 <div class="list_3_div"><span class="county">天河</span><span class="time_slot">每周至少3天</span></div>
                 <div class="littleInterval"></div>
               </div>
               <div class="list_1_div" @click="showDetail">
                 <div class="list_2_div"><span class="span_title">销售文员/助理</span><span class="span_price">100/天</span></div>
                 <div class="list_3_div"><span class="county">天河</span><span class="time_slot">每周至少5天</span></div>
                 <div class="littleInterval"></div>
               </div>
               <div class="list_1_div" v-for="item in list" @click="showDetail">
                 <div class="list_2_div"><span class="span_title">招聘实习文员</span><span class="span_price">150元/天</span></div>
                 <div class="list_3_div"><span class="county">天河</span><span class="time_slot">每周至少2天</span></div>
                 <div class="littleInterval"></div>
               </div>
             </mt-loadmore>
           </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
</template>

<script>
    export default {
        name: "CompanyDetail",
      data(){
          return{
            selected:'1',
            swipeable:true,
            show:true,
            allLoaded:false,
            length:10,
            list:[1,2,3,4,5,6,7,8,9,0]
          }
      },
      methods:{
        shrikContent(){
          this.show=!this.show;
        },
        goback(){
          this.$router.push({path:'/main/company'});
        },
        loadBottom() {
          // 加载更多数据
          for (let i = 1; i <= 10; i++) {
            this.list.push(i);
          }
          //this.allLoaded = true;// 若数据已全部获取完毕
          this.$refs.loadmore.onBottomLoaded();
        },
        showDetail(){
          this.$router.push({path:'/jobMessage'});
        }
      }
    }
</script>

<style scoped>
  .county{
    margin-left: 1rem
  }
  .time_slot{
    margin-left: 1rem;
  }
  .mint-loadmore{
    height: 62vh;
    overflow: scroll;
  }
  .list_2_div{
    font-size: large;
    font-weight: bold;
    text-align: left;
    line-height: 5rem;
  }
  .span_title{
    margin-left: 1rem;
  }
  .span_price{
    float: right;
    margin-right: 1rem;
    color: #ff862a;
  }
  .list_3_div{
    text-align: left;
    line-height: 3rem;
  }
  .return_img{
    height: 2rem;
    width: 2rem;

  }
  .return_div{
    height: 4rem;
    width: 4rem;
    z-index: 999;
    position: absolute;
    border-radius: 4rem;
    background-color: gray;
    opacity: 0.5;
    line-height: 4rem;
  }
  .company_content{
    margin-top: 1rem;
    text-align: left;
    padding-left: 1rem;
    padding-right: 1rem;
    line-height: 2rem;
  }
  .company_introduction{
    margin-top: 1rem;
    text-align: left;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: larger;
    font-weight: bold;
  }
  #carousel{
    height: 30%;
  }
  .tab_title{
    font-size: larger;
  }
</style>
